<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动菜单-headroom</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.headroom{
				margin-bottom: 20px;
			}
			.headroom ul{
				background: #f63;
				overflow: hidden;
			}
			.headroom li{
				float: left;
				width:20%;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
			.headroom li a{
				display: block;
				text-decoration: none;
				color:#fff;
			}
			.headroom li a.active{
				background: rgba(0,0,0,0.1);
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.headroom.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="headroom">
				<div class="head">
					<ul>
						<li><a href="#hash1">菜单1</a></li>
						<li><a href="#hash2">菜单2</a></li>
						<li><a href="#hash3">菜单3</a></li>
						<li><a href="#hash4">菜单4</a></li>
						<li><a href="#hash5">菜单5</a></li>
					</ul>
				</div>
			</div>
			<div class="code">
				<p></p>
				<p>$('.head').headroom({'hiddenTop':400,autoHide:false,'scrollOffset':60});</p>
			</div>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).headroom(options);</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>fixedTop</td>
							<td>0</td>
							<td>浮动距离浏览器视窗顶部的位置</td>
						</tr>
						<tr>
							<td>hiddenTop</td>
							<td>[自动计算]</td>
							<td>滚动到哪个位置开始隐藏菜单</td>
						</tr>
						<tr>
							<td>duration</td>
							<td>500</td>
							<td>隐藏展示动画的时间间隔</td>
						</tr>
						<tr>
							<td>autoHide</td>
							<td>true</td>
							<td>是否自动隐藏</td>
						</tr>
						<tr>
							<td>scrollOffset</td>
							<td>0</td>
							<td>描点滚动偏移顶部距离</td>
						</tr>
						<tr>
							<td>activeCls</td>
							<td>'active'</td>
							<td>菜单选中时的class</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="hash1" style="height:600px;">描点1</div>
			<div id="hash2" style="height:600px;">描点2</div>
			<div id="hash3" style="height:600px;">描点3</div>
			<div id="hash4" style="height:600px;">描点4</div>
			<div id="hash5" style="height:600px;">描点5</div>
			<script type="text/javascript">
				$('.head').headroom({'hiddenTop':400,autoHide:false,'scrollOffset':60});
			</script>
		</div>
		<div style="display: none;">
			<script src="http://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
<html>
